<template>
  <div class="form-action">
    <div class="action-btns">
      <slot name="submitBefore" />
      <el-button
        v-if="$props.showSearchBtn"
        type="primary"
        @click="search"
      >
        {{ $props.searchText }}
      </el-button>
      <slot name="resetBefore" />
      <el-button
        v-if="$props.showResetBtn"
        @click="reset"
      >
        {{ $props.resetText }}
      </el-button>
      <slot name="resetAfter" />
      <div
        v-if="$props.showMoreBtn"
        class="more-filter"
        @click="handleMoreFilter"
      >
        更多
        <i
          :class="[
            'form-icon',
            showMoreFilter ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
          ]"
        />
      </div>
      <slot name="moreAfter" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, unref } from 'vue'
import { formActionProps } from '../props'

export default defineComponent({
  name: 'BasicFormAction',
  props: {
    showMoreBtn: {
      type: Boolean,
      default: true
    },
    ...formActionProps
  },
  emits: ['moreFilter', 'submit', 'reset'],
  setup(props, { emit }) {
    const showMoreFilter = ref(props.modelValue)

    function search() {
      emit('submit')
    }

    function reset() {
      emit('reset')
    }

    function handleMoreFilter() {
      showMoreFilter.value = !unref(showMoreFilter)
      emit('moreFilter', unref(showMoreFilter))
    }

    return {
      showMoreFilter,
      search,
      reset,
      handleMoreFilter
    }
  }
})
</script>

<style lang="scss">
@import '@/styles/bas.scss';

.form-action {
  margin-left: 16px;

  .more-filter {
    cursor: pointer;
    margin-left: 16px;
    color: $primary-color;
  }

  .action-btns {
    display: flex;
    align-items: center;
    min-height: 32px;

    & button:not(:first-of-type) {
      margin-left: 12px !important;
    }
  }

  .form-icon {
    font-size: 16px !important;
  }
}
</style>
